<template>
  <div class="myaddress">
    <van-nav-bar title="我的地址" left-arrow @click-left="onClickLeft" />
    <van-address-list
      v-model="select"
      :list="areaList"
      @add="onAdd"
      @edit="onEdit"
      @select="changeselect"
    />
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <tologin3></tologin3>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script >
import { Dialog } from "vant";
import tologin3 from "./../../../components/tologin3";
export default {
  data() {
    return {
      // 地址列表
      areaList: [],
      select: 0,
      show: true
    };
  },
  created() {
    const user = JSON.parse(localStorage.getItem("user") || "{}");
    if (JSON.stringify(user) !== "{}") {
      this.show = false;
      this.areaList = JSON.parse(
        localStorage.getItem("address_data_list") || "[]"
      );
      // console.log(this.areaList)

      this.areaList.forEach((el, index) => {
        el.address = el.addressDetail;
      });

      this.areaList.forEach((el, index) => {
        if (el.isDefault == true) {
          this.select = el.id;
        }
      });
    } else {
      // console.log(user);
      this.show = true;
    }

    // this.areaList.address = this.areaList.addressDetail;

    // 默认选中的地址

    // console.log(this.areaList, this.select);
  },
  methods: {
    // 改变默认地址
    changeselect(el, index) {
      // index 当前点击选中的按钮  0
      var num = "";
      // 遍历出当前选中的id
      this.areaList.forEach((el, index) => {
        if (el.isDefault == true) {
          num = el.id;
        }
      });
      // num 数据里选中的默认按钮  之前的  1
      // console.log(num);
      // 点击的是选中的
      if (el.id == num) {
        Dialog.alert({
          message: "当前地址已经是默认地址"
        }).then(() => {
          // on close
        });

        // Dialog.alert({
        //   message: "当前地址已经是默认地址"
        // }).then(() => {
        //   // on close
        // });
      } else {
        // 更改默认
        Dialog.confirm({
          title: "改变默认地址",
          message: "是否把当前地址设置为默认地址"
        })
          .then(() => {
            // console.log("yes")
            // console.log(index, num, this.select); //2,2,3
            this.areaList.forEach((el, index1) => {
              if (el.id == this.select) {
                el.isDefault = true;
              } else {
                el.isDefault = false;
              }
            });
            localStorage.setItem(
              "address_data_list",
              JSON.stringify(this.areaList)
            );
            // console.log(this.areaList, this.select);
          })
          .catch(() => {
            this.areaList.forEach((el2, index2) => {
              if (el2.isDefault === true) {
                this.select = el2.id;
              }
            });
            // console.log(this.areaList, this.select);
          });
      }

      // if(index!=this.select){
      //   console.log(true)
      // }else{
      //   console.log(false)
      // }
    },
    onClickLeft() {
      // this.$router.go(-1);
      this.$router.push("/home");
    },
    onAdd() {
      this.$router.push("/home/address");
    },
    onEdit(el, index) {
      // 第几个  从 0 开始
      var cid = this.areaList[index].id;
      this.$router.push("/mine/editaddress/" + cid);
    }
  },
  components: {
    tologin3
  }
};
</script>
<style lang="less" scoped>
.myaddress {
  .van-nav-bar {
    background-image: linear-gradient(90deg, #0af, #0085ff);
    .van-icon {
      color: #fff;
      font-size: 18px;
      margin-left: -4px;
      margin-bottom: 7px;
    }
    .van-nav-bar__title {
      font-weight: bold;
      color: #fff;
      font-size: 18px;
    }
  }
  .van-address-edit[data-v-28589d54] {
    padding: 0px;
    /deep/.van-button {
      border-radius: 0px;
      background-color: #00d762;
      border: 0px;
    }
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .block {
    width: 80%;
    height: 20%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /deep/.van-overlay {
    z-index: 999 !important;
  }
}
</style>